<template>
  <view class="container">
    <view class="header">
      <SearchDateRange @search="handleSearch" />
    </view>
    <scroll-view class="table" scroll-x="true">
      <view class="table-header">
        <text class="table-cell">房间号</text>
        <text class="table-cell">补助金额(元)</text>
        <text class="table-cell">账户总额(元)</text>
        <text class="table-cell">补助时间</text>
      </view>

      <view class="table-row" v-for="(item, index) in paginatedData" :key="index">
        <text class="table-cell">{{ item.SS_MC }}</text>
        <text class="table-cell">{{ item.subsidyMoney }}</text>
        <text class="table-cell">{{ item.subsidyNumber }}</text>
        <text class="table-cell">{{ item.displayTime}}</text>
      </view>
    </scroll-view>
    <view class="pagination">
      <text class="pagination-button" @click="prevPage">上一页</text>
      <text class="pagination-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
      <text class="pagination-button" @click="nextPage">下一页</text>
    </view>
  </view>
  </view>
</template>

<script>
  import SearchDateRange from '@/component/SearchDateRange.vue';
  import {
    ajax
  } from '../../utils/request.js'
  import {
    formatTimeAndSort
  } from '../../utils/formatTimeAndSort.js';
  export default {
    components: {
      SearchDateRange
    },
    data() {
      return {
        data: [],
        formattedTime: '',
        searchValue: '',
        currentPage: 1,
        itemsPerPage: 10,
        start: '',
        end: '',
      };
    },
    computed: {
      totalPages() {
        return Math.ceil(this.data.length / this.itemsPerPage);
      },
      paginatedData() {
        const start = (this.currentPage - 1) * this.itemsPerPage;
        const end = start + this.itemsPerPage;
        return this.data.slice(start, end);
      }
    },

    onShow() {
      this.start = null; // 初始化时间参数为 null
      this.end = null;
      this.fetchFormData();
    },
    methods: {
      //分页
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      },

      handleSearch(dateRange) {
        // 假设 dateRange 对象包含 start 和 end 属性
        this.start = dateRange.start || null; // 如果没有开始时间，则设为 null
        this.end = dateRange.end || null; // 如果没有结束时间，则设为 null

        // 重新获取数据
        this.fetchFormData();
      },

      fetchFormData() {
        const hasTimeRange = this.start && this.end;
        let postData = {
          ss_mc: uni.getStorageSync('SS_MC'),
        };
        if (hasTimeRange) {
          postData.strTime = this.start;
          postData.endTime = this.end;
        }
        ajax('/api/meter/getmetersubsidyrecord', 'POST', postData).then(data => {
            // 处理成功返回的数据
            console.log('成功数据:', data);
            // this.data = data.data.subsidyrecord;
            // 格式化时间并排序
            this.data = formatTimeAndSort(data.data.subsidyrecord);
            this.currentPage = 1; // 重置当前页码为第一页
          })
          .catch(error => {
            // 处理请求失败的情况
            console.error('请求失败:', error);
          });
      }
    }
  };
</script>

<style scoped>
  .container {
    padding: 10px;
  }


  .title {
    font-size: 18px;
    font-weight: bold;
  }


  .table-header,
  .table-row {
    width: 200%;
    height: 50px;
    display: flex;

    align-items: center;
    border-bottom: 0.1px solid #e3e3e3;
    white-space: nowrap;
  }

  .table-cell {
    width: 50%;
    flex: 1;
    text-align: center;
    /* padding: s0px 10px; */
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }

  .pagination-button {
    padding: 5px 10px;
    color: black;
    border: .1px solid #e3e3e3;
    border-radius: 5px;
    cursor: pointer;
  }

  .pagination-info {
    margin: 0 10px;
  }
</style>